<template></template>

<script setup>
import * as L from 'leaflet'
import yulinGeojson from '@/assets/data/yulin.json'
import Point from './point.vue'
import Popup from './popup.vue'
import { useWarningStore } from '@/pages/warning/store/store'
const warningStore = useWarningStore()
const layerGroup = L.layerGroup()
const baseMap = inject('baseMap')
const pointsAll = ref([])
const markers = ref([])
watch(
  () => warningStore.warningInfoData,
  (newval, oldval) => {
    if (newval) {
      handleInitPoint(newval)
    }
  }
)
const handleInitPoint = points => {
  markers.value.forEach(el => el && el.remove())
  points.forEach(item => {
    const markerContainer = document.createDocumentFragment()
    const pointDom = createApp(Point, {
      item
    }).mount(markerContainer)
    let marker = null
    let latlng = [item.latitude, item.longitude]
    marker = L.marker(latlng, {
      icon: L.divIcon({
        iconAnchor: [25, 20],
        html: pointDom.$el
      })
    })
    const popupDom = createApp(Popup, {
      item
    }).mount(markerContainer)
    const marketpopup = L.popup()
    marker.on('mouseover', function (e) {
      marketpopup
        .setLatLng(latlng)
        .setContent(popupDom.$el)
        .openOn(toRaw(baseMap.value))
    })
    marker.on('mouseout', function (e) {
      marketpopup.close()
    })
    markers.value.push(marker)
    layerGroup.addLayer(marker)
  })
  useEventBus('handleAddLayer').emit(layerGroup, 'warning')
}
onUnmounted(() => {
  useEventBus('handleRemoveLayer').emit('warning')
})
</script>

<style lang="scss" scoped></style>
